﻿@page
@model Senparc.Areas.Admin.Areas.Admin.Pages.RoleIndexModel
@{
    ViewData["Title"] = "角色管理"; Layout = "_Layout_Vue";
}
@section breadcrumbs {
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
}

<div>
    <div class="admin-role">
        <div class="filter-container">
            <el-button class="filter-item" v-has="['role-add']" type="primary" icon="el-icon-plus" @@click="handleEdit">增加</el-button>
        </div>
        <el-table :data="tableData"
                  border
                  style="width: 100%">
            <el-table-column align="center"
                             label="角色名称">
                <template slot-scope="scope">
                    {{ scope.row.roleName}}
                </template>
            </el-table-column>
            <el-table-column align="center"
                             label="角色代码">
                <template slot-scope="scope">
                    {{ scope.row.roleCode}}
                </template>
            </el-table-column>
            <el-table-column align="center"
                             label="备注">
                <template slot-scope="scope">
                    {{ scope.row.adminRemark}}
                </template>
            </el-table-column>
            <el-table-column align="center"
                             label="说明">
                <template slot-scope="scope">
                    {{ scope.row.remark}}
                </template>
            </el-table-column>
            <el-table-column align="center"
                             label="添加时间">
                <template slot-scope="scope">
                    {{formaTableTime(scope.row.addTime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini"
                               type="primary"
                               v-has="['role-edit']"
                               @@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini"
                               type="primary"
                               v-has="['role-grant']"
                               @@click="handleRole(scope.$index, scope.row)">权限</el-button>
                    <el-popconfirm placement="top" title="确认删除此角色吗？" v-has="['role-delete']" @@on-confirm="handleDelete(scope.$index, scope.row)">
                        <el-button size="mini" type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <pagination :total="paginationQuery.total"
                    :page.sync="listQuery.pageIndex"
                    :limit.sync="listQuery.pageSize"
                    @@pagination="getList"></pagination>
        <!--编辑、新增 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" :close-on-click-modal="false">
            <el-form ref="dataForm"
                     :rules="dialog.rules"
                     :model="dialog.data"
                     label-position="left"
                     label-width="100px"
                     style="max-width: 400px; margin-left:50px;">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="dialog.data.roleName" clearable placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="角色代码" prop="roleCode">
                    <el-input v-model="dialog.data.roleCode" clearable placeholder="请输入角色代码" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="dialog.data.enabled"></el-switch>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="dialog.data.remark" clearable placeholder="请输入说明" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="dialog.data.adminRemark" clearable placeholder="请输入备注信息" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @@click="dialog.visible = false">取 消</el-button>
                <el-button :loading="dialog.updateLoading" type="primary" @@click="updateData">确 认</el-button>
            </div>
        </el-dialog>
        <!--授权 -->
        <el-dialog :title="'为  '+au.title+'  角色授权'" :visible.sync="au.visible" :close-on-click-modal="false">
            <el-tree :data="allMenu" ref="tree" show-checkbox :props="defaultProps" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" node-key="id"></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @@click="au.visible = false">取 消</el-button>
                <el-button :loading="au.updateLoading" type="primary" @@click="auUpdateData">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</div>
@section scripts{
    <script src="~/js/Admin/Pages/Role/Index.js"></script>
}
